<template>
  <div id="app">
    <noscript>
      <strong>我们很抱歉，但本系统需要启用 JavaScript 才能正常工作。请启用它以继续。</strong>
    </noscript>
    <h1>学而时习之</h1>
    <div class="container">
      <div class="left-box">
        <h2>错题排行榜</h2>
        <ul>
          <li v-for="(count, subject) in mistakeRanking" :key="subject">
            {{ subject }}: {{ count }} 道
          </li>
        </ul>
      </div>
      <form @submit.prevent="submitMistake" class="mistake-form">
        <div class="form-group">
          <label for="question">错题内容:</label>
          <textarea id="question" v-model="question" rows="4" cols="50"></textarea>
        </div>
        <div class="form-group">
          <label for="subject">学科:</label>
          <input type="text" id="subject" v-model="subject">
        </div>
        <div class="form-group">
          <label for="knowledgePoint">知识点:</label>
          <input type="text" id="knowledgePoint" v-model="knowledgePoint">
        </div>
        <input type="submit" value="提交错题" class="submit-btn">
        <!-- 添加回答框 -->
        <div class="response-box" v-html="loading ? '加载中。。。' : result"></div>
      </form>
      <div class="right-box">
        <h2>错题记录</h2>
        <ul>
          <li v-for="(mistake, index) in savedMistakes" :key="index">
            <p>错题内容: {{ mistake.question }}</p>
            <p>学科: {{ mistake.subject }}</p>
            <p>知识点: {{ mistake.knowledgePoint }}</p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      question: '',
      subject: '',
      knowledgePoint: '',
      result: '',
      loading: false,
      // 从本地存储中读取错题排行榜数据
      mistakeRanking: JSON.parse(localStorage.getItem('mistakeRanking')) || {},
      savedMistakes: JSON.parse(localStorage.getItem('savedMistakes')) || []
    };
  },
  methods: {
    async submitMistake() {
      try {
        this.loading = true;
        const response = await fetch('http://localhost:3000/submit-mistake', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({
            question: this.question,
            subject: this.subject,
            knowledgePoint: this.knowledgePoint
          })
        });

        const data = await response.json();

        if (response.ok) {
          this.result = `<p style="color: green;">${data.message}</p><p>${data.response}</p>`;
          // 更新错题排行榜
          if (this.mistakeRanking[this.subject]) {
            this.mistakeRanking[this.subject]++;
          } else {
            this.mistakeRanking[this.subject] = 1;
          }
          // 保存错题排行榜到本地存储
          localStorage.setItem('mistakeRanking', JSON.stringify(this.mistakeRanking));
          // 保存错题到本地存储
          this.savedMistakes.push({
            question: this.question,
            subject: this.subject,
            knowledgePoint: this.knowledgePoint
          });
          localStorage.setItem('savedMistakes', JSON.stringify(this.savedMistakes));
        } else {
          this.result = `<p style="color: red;">${data.message}: ${data.error}</p>`;
        }
      } catch (error) {
        this.result = `<p style="color: red;">请求出错: ${error.message}</p>`;
      } finally {
        this.loading = false;
      }
    }
  }
};
</script>

<style scoped>
#app {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
  /* 添加背景图片 */
  background-image: url('./background.jpg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}

h1 {
  text-align: center;
  color: #333;
  font-size: 2.5rem;
  margin-bottom: 30px;
}

.container {
  display: flex;
  gap: 30px;
}

.left-box, .right-box {
  flex: 1;
  background-color: #ffffff;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.left-box:hover, .right-box:hover {
  transform: translateY(-5px);
}

.left-box h2, .right-box h2 {
  color: #2c3e50;
  font-size: 1.8rem;
  margin-bottom: 20px;
  border-bottom: 2px solid #e74c3c;
  padding-bottom: 10px;
}

.left-box ul, .right-box ul {
  list-style-type: none;
  padding: 0;
}

.left-box li, .right-box li {
  padding: 10px 0;
  border-bottom: 1px solid #ecf0f1;
  font-size: 1.1rem;
  color: #34495e;
}

.left-box li:last-child, .right-box li:last-child {
  border-bottom: none;
}

.mistake-form {
  flex: 2;
  background-color: #ffffff;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.form-group {
  margin-bottom: 20px;
}

label {
  display: block;
  margin-bottom: 10px;
  font-weight: bold;
  color: #2c3e50;
  font-size: 1.2rem;
}

textarea, input {
  width: 100%;
  padding: 12px;
  border: 2px solid #bdc3c7;
  border-radius: 5px;
  box-sizing: border-box;
  font-size: 1rem;
  transition: border-color 0.3s ease;
}

textarea:focus, input:focus {
  outline: none;
  border-color: #2980b9;
}

.submit-btn {
  background-color: #27ae60;
  color: white;
  padding: 12px 25px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1.1rem;
  transition: background-color 0.3s ease;
}

.submit-btn:hover {
  background-color: #2ecc70;
}

.response-box {
  margin-top: 20px;
  padding: 15px;
  border: 2px solid #3498db;
  border-radius: 5px;
  background-color: #ecf0f1;
  min-height: 50px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}
</style>